<template>
  <h2>todolist</h2>

  <button @click="decrement">-</button>
  <span>{{ count }}</span>
  <button @click="increment">+</button>

  <hr />

  <input type="text" v-model="value" />
  <button @click="add">添加</button>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="remove(item.id)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      count: 3,
      value: "",
      list: [
        {
          id: 1,
          name: "zhangmou",
        },
        {
          id: 2,
          name: "junmou",
        },
      ],
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
    add() {
      this.list.push({
        id: new Date().getTime(),
        name: this.value,
      });
      this.value = "";
    },
    remove(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
  },
};
</script>
